<!DOCTYPE HTML>

<html>

<head>

    <title>厚德开福</title>

    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link href="{{ URL::asset('/') }}ku/css/1_style.css" rel="stylesheet">
    <link href="{{ URL::asset('/') }}web/weui.css" rel="stylesheet">
    <script src="{{ URL::asset('/') }}ku/css/jquery-1.8.3.min.js"></script>

    <script src="http://webapi.amap.com/maps?v=1.3&key=2097771bed0403e2bf783397da42e5fe"></script>
</head>


<style>

    @font-face {font-family: "iconfont";
        src: url('//at.alicdn.com/t/font_5knyhat0o8mmquxr.eot?t=1493300495082'); /* IE9*/
        src: url('//at.alicdn.com/t/font_5knyhat0o8mmquxr.eot?t=1493300495082#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('//at.alicdn.com/t/font_5knyhat0o8mmquxr.woff?t=1493300495082') format('woff'), /* chrome, firefox */
        url('//at.alicdn.com/t/font_5knyhat0o8mmquxr.ttf?t=1493300495082') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('//at.alicdn.com/t/font_5knyhat0o8mmquxr.svg?t=1493300495082#iconfont') format('svg'); /* iOS 4.1- */
    }

    .iconfont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-more:before { content: "\e6a7"; }

    .icon-xiangji:before { content: "\e6fd"; }

</style>

<style>

    .file {
        width: 100px;
        height: 100px;
        overflow: hidden;
        display: inline-block;
        position: relative;
    }
    .file input {
        position: absolute;
        top: 0px;
        left: 0px;
        font-size:64px; opacity:0; filter:alpha(opacity=0);
    }
    .no-b{
        padding-top: 0;
    }
    .no-b:before{
        border-top:none;
    }

</style>

<body>

<header style="
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 20px;
        background: #f5f5f5;
">
    <h1 style="font-size: 28px;color: #3CC51F">不文明行为曝光台</h1>
    <h2 style="font-size: 14px;color: grey">随时随地曝光不文明</h2>
</header>
<div id="container"></div>
<div class="page_bd" style="background: #fff">
    <?php if(isset($error)) { ?>
        <div id="error" style="text-align: center;color: red;">{{ $error }}</div>
    <?php } ?>
    <form method="post" action="/add" enctype="multipart/form-data">
        {{ csrf_field() }}
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">时间</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" name="time" value="{{ $time }}" type="text">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">位置</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="address" id="address">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">分类</label></div>
            <div class="weui-cell__bd">
                <select name="num">
                    <option value="0">请选择</option>
                    <option value="车窗抛物">车窗抛物</option>
                    <option value="机动车、非机动车、行人乱行">机动车、非机动车、行人乱行</option>
                    <option value="车辆乱停">车辆乱停</option>
                    <option value="不排队、不依次上下车">不排队、不依次上下车</option>
                    <option value="乱吐乱扔">乱吐乱扔</option>
                    <option value="乱贴乱画">乱贴乱画</option>
                    <option value="乱发小卡片">乱发小卡片</option>
                    <option value="占道经营">占道经营</option>
                    <option value="公共场所吸烟">公共场所吸烟</option>
                    <option value="躺卧公共座椅">躺卧公共座椅</option>
                </select>
            </div>
        </div>
        <div class="weui-cell" style="border-bottom: none">图片上传</div>
        <div class="weui-cell no-b">
            <div class="file"><img id="preview1" style="width: 100%" src="{{ URL::asset('/') }}web/imgs/jia.png"/><input type="file" id="1" name="img1" /></div>
            {{--<div class="file"><img id="preview2" style="width: 100%" src="{{ URL::asset('/') }}web/imgs/jia.png"/><input type="file" id="2" name="img2" /></div>--}}
        </div>
        <div class="weui-cell" style="font-size: 14px;color: #8f8d8d;">备注</div>
        <div class="weui-cell__bd weui-cell">
            <textarea class="weui-textarea" name="remark" placeholder="请输入您的备注内容" rows="3"></textarea>
        </div>
        <div class="page-bd-15" style="width: 100%">
            <input type="submit" style="
                background: #04be02;
                width: 90%;
                height: 44px;
                line-height: 44px;
                display: block;
                text-align: center;
                color: #fff;
                margin: 0 auto;
                border: 1px solid #04be02;
                border-radius: 10px;
                margin-top: 20px;
        " class="weui_btn weui_btn_primary" value="确定"/>
        </div>
    </form>
</div>


<script>
    <?php if(isset($error)) { ?>
        setTimeout(function () {
            $('#error').hide();
        } , 1000);
    <?php } ?>
</script>



<style>body > span{display:none;}</style>

<script>
    $(function(){

        $("#share a").click(function(){
            $("#guide").show();
        });

        $("#guide").click(function(){
            $(this).hide();
        });


        var mapObj = new AMap.Map('container' , {
            resizeEnable: true
        });
        mapObj.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: false,        //显示定位按钮，默认：true
                buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy:true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
            mapObj.addControl(geolocation);
            geolocation.getCurrentPosition();

            AMap.event.addListener(geolocation, 'complete', function(data){

                $('#address').val(data.formattedAddress);
            });//返回定位信息
            AMap.event.addListener(geolocation, 'error', function (error) {
                alert("没有获取位置的权限,请去系统设置里面授权");
            });      //返回定位出错信息
        });

    });
</script>

<script>

    function preview1(file , id) {
        var reader = new FileReader()
        reader.onload = function(e) {
            $('#preview'+ id).attr('src' , e.target.result)
        }
        reader.readAsDataURL(file)
    }

    $(function() {
        $('[type=file]').change(function(e) {
            var file = e.target.files[0];
            var id = $(this).attr('id');
            preview1(file , id)
        })
    })

</script>

</body>

</html>